<template>
  <div>
    <a-input v-if="isEdit" @change="onChange" v-model:value="number">{{
      number
    }}</a-input>
    <span v-else class="number">{{ number }}</span>
    <span class="unit">{{ unit }}</span>
  </div>
</template>

<script setup>
import * as _ from "lodash";
import { cloneDeep } from "lodash";
import { defineProps, ref, watch } from "vue";
import { useStore } from "vuex";
import global from "../../../global/global.vue";

const props = defineProps({
  isEdit: Boolean,
  index: String,
  isGetData: Boolean,
});

// 项目id
const projectId = global.xmid;
// 本地仓库获取数据
const store = useStore();
const number = ref("");
const unit = ref("");

// 监听获取到数据
watch(
  () => props.isGetData,
  (newV, oldV) => {
    number.value =
      store.state.progressFilling.editProgressFillingData[props.index].gcl;
    unit.value =
      store.state.progressFilling.editProgressFillingData[props.index].gcldw;
  }
);

// 输入框改变设置新值
// 设置防抖
const onChange = _.debounce(() => {
  // 改变提交参数数据
  const paramsData = cloneDeep(store.state.progressFilling.paramsData);
  // 判断
  const index = paramsData.findIndex(
    (item) =>
      item.zbId ===
      store.state.progressFilling.editProgressFillingData[props.index].zbId
  );
  if (index === -1) {
    //  1.1 该行数据首次编辑，创建新数据
    paramsData.push({
      zbId: store.state.progressFilling.editProgressFillingData[props.index]
        .zbId,
      tbId: store.state.progressFilling.editProgressFillingData[props.index]
        .tbId,
      gcl: number.value,
      xmmc: store.state.progressFilling.editProgressFillingData[props.index]
        .xmmc,
      content:
        store.state.progressFilling.editProgressFillingData[props.index]
          .content,
      gcldw:
        store.state.progressFilling.editProgressFillingData[props.index].gcldw,
      tze: store.state.progressFilling.editProgressFillingData[props.index].tze,
      xmId: projectId,
    });
    store.commit("progressFilling/initParamsData", paramsData);
  } else {
    // 1.2 该行数据不是首次被编辑，修改原来数据
    paramsData[index].gcl = number.value;
    store.commit("progressFilling/initParamsData", paramsData);
  }
  console.log(store.state.progressFilling.paramsData);
}, 1000);
</script>

<style lang="scss" scoped></style>
